<template>
     <div class="box1">
    <el-row class="box2">
      <el-col :span="23" :offset="1">
        <div class="demo-input-size">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="input1"
          >
          </el-input>
          

          <el-button type="primary" class="el-icon-zoom-in" @click="searchUser"
            >搜索</el-button
          >
          <el-button type="info" class="el-icon-refresh" @click="resetUser"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-button type="primary" plain @click="dialogFormVisible = true" disabled 
          >新增</el-button
        >
        <el-button type="success" icon="el-icon-edit" disabled plain
          >修改</el-button
        >
        <el-button type="danger" icon="el-icon-delete" disabled plain
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="23" :offset="1">
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
        >
          <el-table-column type="selection"> </el-table-column>

          <el-table-column label="账户编号">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>

          <el-table-column prop="name" label="用户名"> </el-table-column>

          <el-table-column label="用户头像">
            <template slot-scope="scope">
              <img class="userimg" :src="scope.row.avatar" />
            </template>
          </el-table-column>

          <el-table-column prop="overage" label="账户金额"> </el-table-column>

          <el-table-column prop="repository" label="藏品数量"> </el-table-column>

          <el-table-column prop="createtime" label="账户创建时间">
          </el-table-column>

          <el-table-column prop="modiftime" label="账户修改时间">
          </el-table-column>

          <el-table-column label="操作">

            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="openDialog(scope.row.id, scope.row.name, scope.row.overage)"
                circle
                style="margin-right: 20px"
              ></el-button>

              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
              >
                <el-button
                  type="danger"
                  disabled plain
                  icon="el-icon-delete"
                  slot="reference"
                  circle
                ></el-button>
              </el-popconfirm>

            </template>

          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="13" :offset="1">
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 15, 20]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalNum"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改账户金额" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户金额" :label-width="formLabelWidth">
          <el-input v-model="form.overage" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submintDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AccountApi from '@/api/account/AccountApi'
export default {
    name: 'AccountManage',
    data() {
    return {
      input1: "",
      tableData: [],
      // 当前页
      currentPage: 1,
      // 每页显示的数据条数
      pageSize: 5,
      // 总条数
      totalNum: 10,

      dialogFormVisible: false,
      form: {
        name: "",
        overage: "",
        id: "",
      },
      formLabelWidth: "120px",
    };
  },
     created() {
    AccountApi.userAccountList().then((res) => {
      console.log(res.data.data)
      // console.log(this.$store.state)
      this.tableData = res.data.data;
      this.totalNum = this.tableData.length;
    });
  },
  methods: {
    searchUser() {
      // 搜索按钮回调
      // console.log(this.input1);
      AccountApi.userAccountListLike(this.input1).then((res) => {
         this.tableData = res.data.data;
         this.totalNum = this.tableData.length;
      });
      // 重置按钮
      (this.input1 = "");
    },

    resetUser() {
      // 重置按钮
      (this.input1 = "");
      AccountApi.userAccountList().then((res) => {
      // console.log(res.data.data)
      // console.log(this.$store.state)
      this.tableData = res.data.data;
      this.totalNum = this.tableData.length;
    });
    },

    openDialog(id, name, overage) {
      this.dialogFormVisible=true;
      // console.log(id,name,overage);
      this.form= {
        name: name,
        overage: overage,
        id: id,
      }
    },
    closeDialog(){
      this.dialogFormVisible=false;
      this.form= {};
    },

    submintDialog(){
      // console.log(this.form.id);
      AccountApi.updataAccount(this.form.id, this.form.overage).then(res=>{
        // console.log(res.data)
        if (res.data.code == 1) {
          // 关闭弹窗
          this.closeDialog();
          // 显示成功的消息
           this.$message.success(res.data.message);
          //  重新查找所有用户
          this.resetUser();
        } else {
          this.$message.error(res.data.message);
        }
      })

    },
    handleSelectionChange(val) {
      // 每当选择发送变化时调此回调函数
      this.multipleSelection = val;
      console.log(val);
    },
    rowClick(val) {
      // 当列被点击时触发回调函数
      console.log(val);
    },
    changeSwitch(val) {
      // 用户状态的回调函数
      console.log(val);
    },
    handleSizeChange(val) {
      //每页条数改变时触发
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // 当前页发生改变的回调
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
}
</script>

<style scoped>
 .box1 {
  /* background-color: pink; */
  position: relative;
  top: 25px;
}
.box2 {
  /* background-color: rgb(4, 44, 117); */
  top: 4%;
  left: -5px;
}
.el-row {
  margin-bottom: 20px;
}
.el-input,
.el-select {
  width: 200px;
  margin-right: 50px;
}


.el-table::before {
  width: auto;
}
.userimg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
</style>